<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <el-row :gutter="20">
      <!-- 树结构 -->
      <el-col :xs="24" :sm="4" :lg="4">
        <div class="grid-left">
          <!-- 筛选框 -->
          <el-input
            class="searchinput"
            placeholder="请搜索楼层"
            suffix-icon="el-input__icon el-icon-search"
            v-model="treeinput"
            clearable
            size="small"
          ></el-input>
          <!-- 树结构 -->
          <!-- default-expand-all -->
          <!-- accordion -->
          <el-tree
            :data="treedata"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
            ref="menuTree"
            node-key="id"
            highlight-current
            default-expand-all
            :filter-node-method="filterNode"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <img
                  style="vertical-align: text-top"
                  v-if="data.hasOwnProperty('orderNum')"
                  :src="treeicon.two"
                  alt=""
                />
                <img
                  style="vertical-align: text-top"
                  v-else
                  :src="treeicon.one"
                  alt=""
                />
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 点位模块 -->
      <el-col :xs="24" :sm="15" :lg="15">
        <div class="grid-right">
          <!-- 点位标题 -->
          <div class="grid-top">
            <div class="top-floor" v-if="!this.canvasinit">
              <i></i>
              <p>请上传楼层图片</p>
            </div>
            <!-- <el-button
              type="text"
              @click="deletey"
              icon="el-icon-close"
              v-if="!this.canvasinit"
              >删除平面图</el-button
            > -->
          </div>
          <!-- 上传组件 -->
          <div class="box-upload">
            <!-- 上传 -->
            <div class="bigImg-div">
              <!-- input上传输入框 -->
              <input type="file" class="upinput" ref="file" @change="showimg" />
              <!-- 上传图标 -->
              <!-- <i class="el-icon-plus" id="changes" @click="changeimg"></i> -->
              <img
                src="https://img.thgykj.com/thgy-file/40157a035ca247479478cadc8f7b22c71698024526041.png"
                alt="上传图片"
                style="width: 136px; height: 136px"
                @click="changeimg"
              />
            </div>

            <!-- 文字描述 -->
            <div class="txt">
              *上传地图文件支持<i>png,jpg.jpeg</i>,
              最小分辨率<i>500px*500px</i>, 图片最大上传不超过<i>10M</i>
            </div>
          </div>
          <!-- 图片展示 -->
          <img class="bigImg" :src="backpicture" v-if="backpicture" />
          <!-- 生成画布模块 -->
          <div class="canvas-box" v-show="this.canvasinit">
            <!-- 表头 -->
            <div class="canvas-title">
              <div class="zuo">
                <!-- 请拖动图标到安装位置-<i>{{ 太和广业 }}{{ 一楼 }}平面图</i> -->
                请拖动图标到安装位置-<i>{{ treeAllName }} 平面图</i>
              </div>
              <div class="you">
                <!-- <el-button
                  type="text"
                  icon="el-icon-folder-checked"
                  @click="amplifier"
                  >保存点位</el-button
                > -->
                <el-button type="text" icon="el-icon-delete" @click="eliminate"
                  >清除平面图</el-button
                >
              </div>
            </div>
            <!-- width="970" height="500" -->
            <!-- 画布 -->
            <div id="canvas-item">
              <canvas
                ref="canvas"
                @mousedown="canvasMouseDown"
                @mousemove="canvasMouseMove"
                @mouseup="canvasMouseUp"
                @mousewheel="canvasMouseWhell"
              ></canvas>
            </div>
          </div>
          <!-- 保存平面图 -->
          <div class="bottom" v-if="!this.canvasinit">
            <el-button type="primary" @click="save">保存</el-button>
          </div>

          <!-- 图标提示信息 -->
          <el-popover
            placement="top"
            id="popovercan"
            width="200"
            v-model="canvasvisible"
          >
            <div class="popover-top">
              <i>{{ popoverdata.deviceName }}</i>
              <div class="popover-title" @click="deletenew">
                <i class="el-icon-delete"></i>
              </div>
            </div>
            <p>序列号:{{ popoverdata.deviceId }}</p>
            <p>设备类型：{{ popoverdata.typeName }}</p>
            <p></p>
          </el-popover>
        </div>
      </el-col>
      <!-- 设备信息 -->
      <el-col :xs="24" :sm="5" :lg="5">
        <div class="grid-table">
          <!-- 标题 -->
          <div class="grid-top">
            <i></i>
            <p>配置资源点</p>
          </div>
          <!-- 设备检索 -->
          <div class="newretrieval">
            <el-input
              size="small"
              placeholder="设备备名称,型号，序列号"
              v-model="pageInfo.deviceSerial"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="newsearch"
              ></i>
            </el-input>
            <el-radio-group
              v-model="pageInfo.isPlace"
              style="margin-top: 10px"
              @change="changeradio"
            >
              <!-- <el-radio :label="0">未上图</el-radio>
              <el-radio :label="1">已上图</el-radio> -->
              <el-radio-button :label="0">未上图</el-radio-button>
              <el-radio-button :label="1">已上图</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 表格数据 -->
          <div class="newtable">
            <div
              class="new-item"
              v-for="item in tableData"
              :key="item.id"
              @click="handleClick(item)"
              :class="{
                newitems: item.id === newitemID
              }"
            >
              <div class="newconter">
                <!-- <p>设备名称:{{ item.deviceName }}</p> -->
                <p class="deviceName">{{ item.deviceName }}</p>
                <p>序列号码:</p>
                <p>{{ item.deviceId }}</p>
                <p>设备类型:{{ item.typeName }}</p>
                <p>详细位置:{{ item.position }}</p>
              </div>
              <div>
                <img :src="item.url" alt="" />
              </div>
            </div>
          </div>
          <div class="pagination">
            <!-- :current-page="pageInfo.pageNo"
            :page-size="pageInfo.pageSize" -->
            <!-- @size-change="handleSizeChange" -->
            <el-pagination
              small
              @current-change="handleCurrentChange"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 上传图片
// import { uploadpic } from '@/api/uploadpictures'
// 楼层api
// import { listfloor } from '@/api/resource/floorPt'
// import { getDeviceUserTree } from "@/api/deviceModule/device";
// import { DICT_TYPE, getDictDatas } from "@/utils/dict";

// 点位api
// import {
//   resfloornew,
//   resBuildMsg,
//   newinsert,
//   resdelete,
//   resFloor
// } from '@/api/resource/uploadpt'
export default {
  name: 'Uploadpt',
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    treeinput (val) {
      this.$refs.menuTree.filter(val)
    },
    screenWidth: {
      immediate: true,
      handler: function (newVal) {
        // console.log("浏览器大小", newVal);
        if (newVal != 1920) {
          // console.log('执行了', newVal != 1980)
          this.windowlen = true
        }
      }
    },
    sidebar: {
      deep: true,
      handler (newVal) {
        // console.log(newVal);
        // 用户收缩侧边栏
        if (newVal.opened) {
          this.newValsidebar = 0
        } else {
          this.newValsidebar = 50
        }
        // 关闭设备详情开关
        this.canvasvisible = false
      }
    }
    // checkedkeys: {
    //   // immediate: true,
    //   handler: function (newVal, oldVal) {
    //     if (newVal) {
    //       this.$nextTick(() => {
    //         document.querySelector(".el-tree-node__content").click();
    //       });
    //     }
    //   },
    // },
  },
  data () {
    return {
      // 树结构筛选框
      treeinput: '',
      // 树结构数据
      treedata: [
        {
          id: 0,
          name: '风过无痕',
          children: [
            {
              id: 1,
              name: '一号大楼',
              children: [
                {
                  id: 3,
                  name: '一楼'
                },
                {
                  id: 4,
                  name: '二楼'
                }
              ]
            },
            {
              id: 2,
              name: '二号大楼',
              children: [
                {
                  id: 5,
                  name: '一楼'
                },
                {
                  id: 6,
                  name: '二楼'
                }
              ]
            }
          ]
        }
      ],
      // 树结构配置
      // 树形数据分析
      defaultProps: {
        id: 'id',
        label: 'name',
        children: 'children'
      },
      // 保存点位
      canvaspage: {
        // 楼层id
        floorId: null,
        // 保存移动的点位数据
        backgroundImgs: null,
        // 背景图片
        canvasSensorImg: '',
        // 控制传感器显示
        sensorImgs: ''
      },
      // 获取canvas标签
      canvas: null,
      // 创建画布
      ctx: null,
      // 画布大小
      canvasWidth: 970,
      canvasHeight: 500,
      //定时器
      intervalId: null,
      //判断鼠标是否点击
      isClick: false,
      //记录需要移动的图片的开光
      index: -1,
      //画布渲染帧数
      frameNumber: 20,
      //背景缩放比例
      imgScale: 1.0,
      //背景拖动速度
      imgMove: 20,
      // 图标
      sensorImgList: [],
      // 画布背景图
      backgroundImg: {
        // url: "http://192.168.2.6:9000/mediafiles/2023/05/30/8303c39be3a3353a43119d684e7fc759.jpg",
        url:
          'https://img.thgykj.com/thgy-file/b664a149ded84c718db9ee7184f71e861698026751466.png',
        x: 0,
        y: 0,
        width: 970,
        height: 500
      },
      // 传感器中的图片
      canvasSensorImg: [],
      // 传感器数据
      tableData: [
        {
          communicateId: null,
          deviceId: '305723713440736',
          deviceName: 'THGYKJ烟感',
          deviceSerial: '81564326156',
          floorId: '27934770',
          id: 46,
          isDevice: '1',
          isPlace: null,
          modelId: null,
          pageNo: 1,
          pageSize: 10,
          position: '办公室',
          systemId: null,
          typeId: null,
          typeName: '独立式感烟探测器',
          url:
            'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
          verificationCode: null
        },
        {
          communicateId: null,
          deviceId: '925206850455373',
          deviceName: '水压一',
          deviceSerial: '234123',
          floorId: '27934770',
          id: 103,
          isDevice: '1',
          isPlace: null,
          modelId: null,
          pageNo: 1,
          pageSize: 10,
          position: '2314',
          systemId: null,
          typeId: null,
          typeName: '水压探测器',
          url:
            'https://img.thgykj.com/thgy-file/9a0f80042edc491b8b30284a4880ce1e1692242584633.png',
          verificationCode: null
        },
        {
          communicateId: null,
          deviceId: '714e90cb60a54671aa4458cf222d3ec6',
          deviceName: '赛特威尔-可燃气体报警器',
          deviceSerial: '861011040300589',
          floorId: '27934770',
          id: 105,
          isDevice: '1',
          isPlace: null,
          modelId: null,
          pageNo: 1,
          pageSize: 10,
          position: '谢尚文工位',
          systemId: null,
          typeId: null,
          typeName: '可燃气体探测器',
          url:
            'https://img.thgykj.com/thgy-file/63db7ac1ef274a299d8d01d21e061c7d1692242656330.png',
          verificationCode: null
        },
        {
          communicateId: null,
          deviceId: '130',
          deviceName: '一层消控室',
          deviceSerial: '11231',
          floorId: '27934770',
          id: 130,
          isDevice: '0',
          isPlace: null,
          modelId: null,
          pageNo: 1,
          pageSize: 10,
          position: '一层消控室',
          systemId: null,
          typeId: null,
          typeName: '烟感-THGY',
          url:
            'https://img.thgykj.com/thgy-file/e5cde70483ee43a593b9c166ee09ccaa1695187947650.png',
          verificationCode: null
        },
        {
          communicateId: null,
          deviceId: '503745462402253',
          deviceName: '测试用传',
          deviceSerial: '2351235123512',
          floorId: '27934770',
          id: 104,
          isDevice: '1',
          isPlace: null,
          modelId: null,
          pageNo: 1,
          pageSize: 10,
          position: '222',
          systemId: null,
          typeId: null,
          typeName: '用户信息传输装置',
          url:
            'https://img.thgykj.com/thgy-file/61771a3ee1064c16891ed7e2ceb26d361692242551030.png',
          verificationCode: null
        }
      ],
      // 传感器id
      sensorshow: [],
      // 背景图图片
      backpicture:
        'https://img.thgykj.com/thgy-file/b664a149ded84c718db9ee7184f71e861698026751466.png',
      // 笔记本开关
      windowlen: false,
      // 监听是否在笔记本上
      screenWidth: document.body.clientWidth,
      // 画布开关
      // canvasinit: false,
      canvasinit: true,
      // 设备抱紧查询
      pageInfo: {
        // 楼层id
        floorId: null,
        // 搜索条件
        deviceSerial: null,
        // 点位上图
        isPlace: 0,
        // 总条数
        // total: null,
        total: 5,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 5
      },
      // 点击图片
      clickicon: {},
      // 图标开关
      canvasvisible: false,
      // 设备选中id
      newitemID: 0,
      // 背景移动坐标-x
      backgroundX: null,
      // 背景移动坐标-y
      backgroundY: null,
      // 背景移动-x
      letarrbx: [],
      // 背景移动-y
      letarrby: [],
      // 背景移动图标开关
      backiconawtich: false,
      // 放大图标倍数
      SensorImgx: null,
      // 放大图标倍数
      SensorImgy: null,
      // 侧边栏的收缩
      newValsidebar: 0,
      // 弹出框信息
      popoverdata: {},
      // 适配视口
      windowsAdaptive: '970',
      //层级数已选中全称
      treeAllName: '',
      // 树结构图标数据
      treeicon: {
        one:
          'https://img.thgykj.com/thgy-file/65efbed344f1497ca4dd7202898951341693380708210.png',
        two:
          'https://img.thgykj.com/thgy-file/4dc1c414af88450aa4412209e3163a9a1693380737573.png',
        three:
          'https://img.thgykj.com/thgy-file/0c53f258d61f46b48c95dc5566a3bf2d1693380749614.png'
      }
      // 树结构默认选中
      // checkedkeys: [],
    }
  },
  created () {
    // 获取楼层数据
    this.getFloordata()
  },
  mounted () {
    // console.log("侧边栏", this.sidebar);
    if (!this.sidebar.opened) {
      this.newValsidebar = 50
    }
    this.$nextTick(() => {
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false')
    })
    this.init()
  },
  methods: {
    // 树结构点击事件
    handleNodeClick (data) {
      //选中树结构的父节点名称获取
      // let pNode = this.$refs.menuTree.getNode(data).parent.data;
      // let fNode = this.$refs.menuTree.getNode(pNode).parent.data;
      // this.treeAllName = fNode.name + pNode.name + data.name;

      // if (data.children.length !== 0) {
      //   return;
      // }

      // 处理背景图数据
      if (this.canvas) {
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
      }
      this.canvasinit = false
      this.backpicture = ''
      this.backgroundImg.url = ''
      this.canvasSensorImg = []
      this.canvasvisible = false
      // console.log("树形结构", data);
      // console.log(data.id);
      // 租户标识
      // console.log("租户标识", data.id);
      let a = '0p'
      let lessee = data.id.toString()
      // 租户不能点击
      // console.log("str.includes(targetStr)", lessee.includes(a));
      if (lessee.includes(a)) {
        return this.$message.warning('请选择租户下面楼层区域')
      }
      // 楼层id
      this.pageInfo.floorId = data.id
      // 查询楼层点位
      this.getfloorPT(data.id)
      // 查询设备
      this.getfloornew()
    },
    // 树节点搜索
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 获取楼层数据
    // async getFloordata() {
    //   const res = await listfloor();
    //   console.log("楼层数据", res);
    //   this.treedata = res.data;
    // },
    async getFloordata () {
      // let clientType = getDictDatas(DICT_TYPE.TENANT_CLIENT_TYPE)[0].value;
      // const res = await getDeviceUserTree(clientType);
      // console.log("楼层数据", res);
      // this.treedata = res.data;
      // this.checkedkeys.push('jdskfhkjh');
      // this.$nextTick(() => {
      //   this.$refs.menuTree.setCurrentKey(res.data[0].id)
      // })
      this.$nextTick(() => {
        this.$refs.menuTree.setCurrentKey(3)
      })
    },
    // 获取楼层设备数据
    async getfloornew () {
      // const res = await resfloornew(this.pageInfo)
      // console.log("楼层设备", res);
      // this.pageInfo.total = res.data.total
      // this.tableData = res.data.records
    },
    // 获取楼层点位
    async getfloorPT (id) {
      // const res = await resBuildMsg(id)
      // console.log("平面图点位", res);
      // console.log("!res.data.url", !res.data.url);
      // this.treeAllName = res.data.treeAllName
      // if (!res.data.url) {
      //   this.$message.warning('当前楼层没有平面点位图')
      // } else {
      //   // 背景图传递
      //   this.backgroundImg.url = res.data.url
      //   // 点位图传递
      //   this.canvasSensorImg = res.data.list
      //   // 开启画布
      //   this.canvasinit = true
      //   // 启动画布
      //   this.init()
      // }
    },
    // 分页多少条点击事件
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val
      this.getfloornew()
    },
    // 单选框事件
    changeradio (e) {
      console.log('点位上图', e)
      if (e == 0) {
        this.tableData = [
          {
            communicateId: null,
            deviceId: '305723713440736',
            deviceName: 'THGYKJ烟感',
            deviceSerial: '81564326156',
            floorId: '27934770',
            id: 46,
            isDevice: '1',
            isPlace: null,
            modelId: null,
            pageNo: 1,
            pageSize: 10,
            position: '办公室',
            systemId: null,
            typeId: null,
            typeName: '独立式感烟探测器',
            url:
              'https://img.thgykj.com/thgy-file/876083b05f98407a9d613e136c304c5c1692242450327.png',
            verificationCode: null
          },
          {
            communicateId: null,
            deviceId: '925206850455373',
            deviceName: '水压一',
            deviceSerial: '234123',
            floorId: '27934770',
            id: 103,
            isDevice: '1',
            isPlace: null,
            modelId: null,
            pageNo: 1,
            pageSize: 10,
            position: '2314',
            systemId: null,
            typeId: null,
            typeName: '水压探测器',
            url:
              'https://img.thgykj.com/thgy-file/9a0f80042edc491b8b30284a4880ce1e1692242584633.png',
            verificationCode: null
          },
          {
            communicateId: null,
            deviceId: '714e90cb60a54671aa4458cf222d3ec6',
            deviceName: '赛特威尔-可燃气体报警器',
            deviceSerial: '861011040300589',
            floorId: '27934770',
            id: 105,
            isDevice: '1',
            isPlace: null,
            modelId: null,
            pageNo: 1,
            pageSize: 10,
            position: '谢尚文工位',
            systemId: null,
            typeId: null,
            typeName: '可燃气体探测器',
            url:
              'https://img.thgykj.com/thgy-file/63db7ac1ef274a299d8d01d21e061c7d1692242656330.png',
            verificationCode: null
          },
          {
            communicateId: null,
            deviceId: '130',
            deviceName: '一层消控室',
            deviceSerial: '11231',
            floorId: '27934770',
            id: 130,
            isDevice: '0',
            isPlace: null,
            modelId: null,
            pageNo: 1,
            pageSize: 10,
            position: '一层消控室',
            systemId: null,
            typeId: null,
            typeName: '烟感-THGY',
            url:
              'https://img.thgykj.com/thgy-file/e5cde70483ee43a593b9c166ee09ccaa1695187947650.png',
            verificationCode: null
          },
          {
            communicateId: null,
            deviceId: '503745462402253',
            deviceName: '测试用传',
            deviceSerial: '2351235123512',
            floorId: '27934770',
            id: 104,
            isDevice: '1',
            isPlace: null,
            modelId: null,
            pageNo: 1,
            pageSize: 10,
            position: '222',
            systemId: null,
            typeId: null,
            typeName: '用户信息传输装置',
            url:
              'https://img.thgykj.com/thgy-file/61771a3ee1064c16891ed7e2ceb26d361692242551030.png',
            verificationCode: null
          }
        ]
      } else {
        this.tableData = []
        this.pageInfo.total = 0
      }
      // if (!this.pageInfo.floorId) {
      //   return this.$message.warning('请先选择楼层')
      // }
      // this.getfloornew()
    },
    // 设备搜索事件
    newsearch () {
      if (!this.pageInfo.floorId) {
        return this.$message.warning('请先选择楼层')
      }
      // console.log("搜索了");
      this.getfloornew()
    },
    // 删除
    deletey () {
      if (!this.backpicture) {
        return this.$message.success('请先上传楼层图片')
      }
      this.backpicture = ''
    },
    // 上传点击事件
    // toGetImg() {},
    // 获取上传图片
    async showimg () {
      if (!this.pageInfo.floorId) {
        return this.$message.warning('请先选择楼层')
      }
      // console.log("执行了");
      //   console.log('!this.page.floorId', !this.page.floorId)
      //   if (!this.page.floorId) {
      //     return this.$message.warning('请先选择楼层')
      //   }
      //开启遮罩层
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: '正在上传背景图，请耐心等待', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('#futureTransferDialog') //loadin覆盖的dom元素节点
      })
      const that = this
      // console.log(that.$refs.file);
      // console.log(that.$refs.file.files[0]);
      // 声明一个formdata对象
      this.formdata = new FormData()
      // 赋值需要传递的文件
      this.formdata.append('file', that.$refs.file.files[0])
      // 传递楼层id
      this.formdata.append('floorid', this.pageInfo.floorId)
      // 上传文档服务器
      // const res = await uploadpic(this.formdata)
      // console.log('文档服务器', res)
      // 传递展示背景图片
      // this.backpicture = res.data
      // 传递画布背景图片
      // this.backgroundImg.url = res.data
      //关闭遮罩层
      loadingInstance.close()
    },
    // 图标触发输入框事件
    changeimg () {
      // console.log("执行了");
      //   console.log('!this.page.floorId', !this.page.floorId)
      //   if (!this.page.floorId) {
      //     return this.$message.warning('请先选择楼层')
      //   }
      // 点击图标时候，触发input选择文件按钮
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    },
    // 确认保存按钮
    save () {
      if (this.backgroundImg.url) {
        // 打开画布开关
        this.canvasinit = true
        // 加载画布
        this.init()
        this.$message.success('上传图片成功，请稍后')
      } else {
        this.$message.error('请先上传平面图片，在保存!')
      }
    },
    // 创建画布
    init () {
      // 获取自适应标签
      let canvasfa = document.getElementById('canvas-item')
      let x = window.getComputedStyle(canvasfa).getPropertyValue('width')
      let y = window.getComputedStyle(canvasfa).getPropertyValue('height')
      let wx = Number(x.slice(0, -2))
      let wy = Number(y.slice(0, -2))

      // console.log("长款", wx, wy);
      // console.log("canvasfa", canvasfa);
      // 找到画布标签
      this.canvas = this.$refs.canvas
      // 设置画布宽高
      this.canvas.width = wx
      this.canvas.height = wy

      // 判断笔记本上运行
      //   if (this.windowlen) {
      //     // console.log('笔记本浏览', this.windowlen)
      //     this.canvas.width = 780
      //     this.canvas.height = 435
      //     this.canvasWidth = 780
      //     this.canvasHeight = 435
      //     this.backgroundImg.width = 780
      //     this.backgroundImg.height = 435
      //   }
      this.ctx = this.canvas.getContext('2d')
      // 设置背景图
      this.backgroundImg.width = wx
      this.backgroundImg.height = wy

      this.windowsAdaptive = wx

      // 笔记本125% 缩放
      if (this.windowsAdaptive <= 776) {
        // console.log("执行笔记本125%缩放");
        this.canvasSensorImg.forEach(v => {
          v.x = v.x * 0.8
          v.y = v.y * 0.8
        })
      } else if (this.windowsAdaptive == 903.333) {
        // console.log("电视");
      } else if (this.windowsAdaptive == 970) {
        // console.log("1920*1080");
      }
      // 创建背景，图标，移动图标
      this.loadBgImg()
      // 刷新画布
      this.dataRefreh()
    },
    //加载背景图片
    loadBgImg () {
      let img = new Image()
      let bgImg = this.backgroundImg
      img.src = bgImg.url
      // console.log(this.valueUrl);
      //绘制所有图片
      img.onload = () => {
        this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        this.ctx.drawImage(
          img,
          bgImg.x,
          bgImg.y,
          bgImg.width * this.imgScale,
          bgImg.height * this.imgScale
        )
        this.loadSensorImg()
        this.drawCanvasSensorImg()
      }
    },
    //加载图标
    loadSensorImg () {
      let imgList = []
      for (let i = 0; i < this.sensorImgList.length; i++) {
        let img = new Image()
        let sensorImg = this.sensorImgList[i]
        img.src = sensorImg.url
        let imgs = {}
        imgs.img = img
        imgs.x = sensorImg.x
        imgs.y = sensorImg.y
        imgs.width = sensorImg.width
        imgs.height = sensorImg.height
        // console.log(imgs)
        imgList.push(imgs)
      }

      this.drawImg(imgList)
    },
    //绘制图片方法
    drawImg (imgList) {
      // console.log('执行力');
      for (let i = 0; i < imgList.length; i++) {
        this.ctx.drawImage(
          imgList[i].img,
          imgList[i].x * this.imgScale,
          imgList[i].y * this.imgScale,
          imgList[i].width,
          imgList[i].height
        )
      }
    },
    // 绘制图片方法-放大之后
    drawImgs (imgList) {
      for (let i = 0; i < imgList.length; i++) {
        this.ctx.drawImage(
          imgList[i].img,
          imgList[i].x,
          imgList[i].y,
          imgList[i].width,
          imgList[i].height
        )
      }
    },
    // 绘制移动的图片
    drawCanvasSensorImg () {
      // console.log("移动图标绘制");
      let imgList = []
      for (let i = 0; i < this.canvasSensorImg.length; i++) {
        let img = new Image()
        let sensorImg = this.canvasSensorImg[i]
        img.src = sensorImg.url
        let imgs = {}
        imgs.img = img
        imgs.x = sensorImg.x
        imgs.y = sensorImg.y
        // 笔记本125% 缩放
        if (this.windowsAdaptive <= 776) {
          // console.log("执行笔记本125%缩放");
          // imgs.x = imgs.x * 0.8;
          // imgs.y = imgs.y * 0.8;
          imgs.width = sensorImg.width - 10
          imgs.height = sensorImg.height - 10
        } else if (this.windowsAdaptive == 903.333) {
          // console.log("电视");
        } else if (this.windowsAdaptive <= 970) {
          // console.log("1920*1080");
          imgs.width = sensorImg.width
          imgs.height = sensorImg.height
        }
        imgList.push(imgs)
      }
      // console.log('判断条件', this.backiconawtich)
      if (this.backiconawtich) {
        // console.log("执行放大操作");
        this.drawImgs(imgList)
      } else {
        // console.log('不执行放大操作')
        this.drawImg(imgList)
      }
      // this.drawImg(imgList)
    },
    //判断鼠标是否在图标范围内,并返回下标
    isMouseInIcon (e, imgList) {
      let x = e.offsetX
      let y = e.offsetY
      for (let i = 0; i < imgList.length; i++) {
        let imgX = imgList[i].x * this.imgScale
        let imgY = imgList[i].y * this.imgScale
        let imgWidth = imgList[i].width
        let imgHeight = imgList[i].height
        if (
          x > imgX &&
          x < imgX + imgWidth &&
          y > imgY &&
          y < imgY + imgHeight
        ) {
          return i
        }
      }
      return -1
    },
    // 定时器刷新画布
    dataRefreh () {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.loadBgImg()
      }, this.frameNumber)
    },
    //鼠标点击触发事件
    canvasMouseDown (e) {
      // console.log("鼠标点击", e);
      this.isClick = true
      //先判断鼠标是否在需要移动的图标中，再判断是否在固定图标中
      this.index = this.isMouseInIcon(e, this.canvasSensorImg)

      // 选中背景图
      if (this.index == -1) {
        // console.log("没选中");
        // 选中的是背景图样式
        // this.settingMouse("move");
        // 传递初始坐标
        this.backgroundX = e.offsetX
        this.backgroundY = e.offsetY
        // 打开放大开关
        this.backiconawtich = true
        // 传递放大倍数
        this.canvasSensorImg.forEach(v => {
          v.x = v.x * this.imgScale
          v.y = v.y * this.imgScale
        })
        return
      }
      // 设置鼠标yangshi
      this.settingMouse('pointer')
      // 找到当前点击的图标
      // console.log("当前点击的图标下标", this.index);
      // console.log("当前点击的图标", this.canvasSensorImg[this.index]);
      this.$nextTick(() => {
        // console.log("top");
        const canpro = document.getElementById('popovercan')
        // console.log("canpro", canpro);
        canpro.style.position = 'absolute'
        // 弹出框宽度 - 图标的宽度 - 父元素内边距
        // 笔记本125% 缩放
        if (this.windowsAdaptive <= 776) {
          // console.log("执行笔记本125%缩放");
          canpro.style.top =
            this.canvasSensorImg[this.index].y * this.imgScale + 28 + 'px'
          canpro.style.left =
            this.canvasSensorImg[this.index].x * this.imgScale +
            this.newValsidebar -
            55 +
            'px'
        } else if (this.windowsAdaptive == 903.333) {
          // console.log("电视");
        } else if (this.windowsAdaptive <= 970) {
          // console.log("1920*1080");
          canpro.style.top =
            this.canvasSensorImg[this.index].y * this.imgScale + 35 + 'px'
          canpro.style.left =
            this.canvasSensorImg[this.index].x * this.imgScale +
            this.newValsidebar -
            55 +
            'px'
        }
        // 传递图标信息
        this.popoverdata = this.canvasSensorImg[this.index]
        // console.log("点位信息", this.canvasSensorImg[this.index]);
        // 打开图标详细信息
        this.canvasvisible = !this.canvasvisible
      })
    },
    //鼠标移动触发事件
    canvasMouseMove (e) {
      //如果未点击则不触发该事件
      if (!this.isClick) {
        return
      }
      // 放大了图标不能拖动
      if (this.imgScale > 1 && this.index != -1) {
        return
      }
      // 关闭弹出框信息
      this.canvasvisible = false

      // 笔记本125% 缩放
      if (this.windowsAdaptive == 776) {
        // console.log("执行笔记本125%缩放");
      } else if (this.windowsAdaptive == 903.333) {
        // console.log("电视");
      } else if (this.windowsAdaptive == 970) {
        // console.log("1920*1080");
      }
      let x = e.offsetX
      let y = e.offsetY
      // 选中为背景图
      if (this.index == -1) {
        // 改变鼠标演示
        this.settingMouse('move')
        // 背景图移动值
        let bx = x - this.backgroundX
        let by = y - this.backgroundY
        // console.log("移动x", bx);
        // console.log("移动y", by);
        this.letarrbx.push(bx)
        this.letarrby.push(by)
        // 背景图片
        this.backgroundImg.x = bx
        this.backgroundImg.y = by
        // 修改图标位置
        this.backnewchange()
      } else {
        // 选中的为图标
        this.canvasSensorImg[this.index].x =
          this.canvasSensorImg[this.index].x < 0
            ? 0
            : x - this.canvasSensorImg[this.index].width / 2
        this.canvasSensorImg[this.index].y =
          this.canvasSensorImg[this.index].y < 0
            ? 0
            : y - this.canvasSensorImg[this.index].height / 2 <
              this.canvasHeight
            ? y - this.canvasSensorImg[this.index].height / 2
            : this.canvasHeight - this.canvasSensorImg[this.index].height
      }
    },
    // 背景图标中的传感器
    backnewchange () {
      if (this.letarrbx.length > 2) {
        let x =
          this.letarrbx[this.letarrbx.length - 1] -
          this.letarrbx[this.letarrbx.length - 2]
        let y =
          this.letarrby[this.letarrby.length - 1] -
          this.letarrby[this.letarrby.length - 2]
        // console.log("this.imgScale", this.imgScale);
        // console.log('背景图标x', x)
        // console.log('背景图标y', y)
        this.canvasSensorImg.forEach((v, index) => {
          v.x = v.x + x
          v.y = v.y + y
        })
      }
    },
    // 鼠标抬起触发事件
    async canvasMouseUp (e) {
      // 是否点击
      this.isClick = false

      if (this.index == -1) {
        // 背景移动图标
        this.backiconawtich = false
        // 传递放大倍数
        this.canvasSensorImg.forEach(v => {
          v.x = v.x / this.imgScale
          v.y = v.y / this.imgScale
        })
      }

      // 保存传感器点位
      if (this.index != -1) {
        // console.log(
        //   "this.canvasSensorImg[this.index]",
        //   this.canvasSensorImg[this.index]
        // );
        // 这里需要使用深拷贝，不然会影响原坐标x，y-造成坐标保存之后放大0.8倍数
        let x = { ...this.canvasSensorImg[this.index] }
        if (this.windowsAdaptive <= 776) {
          // console.log("执行笔记本125%缩放");
          let q = x.x / 0.8
          let h = x.y / 0.8
          x.x = q.toFixed(2)
          x.y = h.toFixed(2)
        } else if (this.windowsAdaptive <= 970) {
          // const res = await newinsert(x);
        }
        // 处理传感器
        if (x.isDevice == 0) {
          //  x.floorId = x.floorId.split(',')[0]
          x.floorId = this.pageInfo.floorId
        }
        // console.log("拖拽过点位", x);
        // const res = await newinsert(x)
        // console.log("保存传感器点位", res);
        // 刷新设备列表
        this.getfloornew()
      }
    },
    // 鼠标样式事件
    settingMouse (mouse) {
      // let body = document.querySelector('body')
      let canbox = document.querySelector('.canvas-box')
      canbox.style.cursor = mouse
    },
    //滚轮滑动事件
    canvasMouseWhell (e) {
      // 关闭设备详细信息
      this.canvasvisible = false
      let deltaY = e.deltaY
      if (deltaY < 0) {
        this.imgScale = this.imgScale + 0.1
      } else {
        if (this.imgScale <= 1.0) {
          // console.log("执行了");
          this.backgroundImg.x = 0
          this.backgroundImg.y = 0
          return
        }
        this.imgScale = this.imgScale - 0.1
      }
    },
    // 保存点位
    amplifier () {},
    // 清除平面图
    async eliminate () {
      // console.log("执行力");
      console.log('this.pageInfo.floorId', this.pageInfo.floorId)
      // const res = await resFloor(this.pageInfo.floorId)
      // console.log("删除平面图", res);
      // if (res.code == 0) {
      //   // console.log("删除了");
      //   this.backgroundImg.url = ''
      //   this.backpicture = ''
      //   this.canvasinit = false
      //   this.$message.success(res.data)
      // } else {
      //   this.$message.warning('该楼层有设备在报警或故障请先处理' + res.msg)
      // }
    },
    // 点位上传
    handleClick (item) {
      // console.log('点位数据', row)
      // 传递楼层id
      this.newitemID = item.id
      // 判断是否上传楼层图片
      if (this.canvasinit) {
        // 判断是否上图
        if (this.pageInfo.isPlace == 1) {
          return this.$message.warning('该点位已经上传到图中了')
        }
        // 创建点位
        let imgs = {}
        imgs.url = item.url
        imgs.x = 0
        imgs.y = 0
        imgs.width = 35
        imgs.height = 35
        imgs.deviceName = item.deviceName
        imgs.floorId = item.floorId
        imgs.deviceId = item.deviceId
        imgs.typeName = item.typeName
        imgs.position = item.position
        imgs.isDevice = item.isDevice
        // 加载点位图标
        this.canvasSensorImg.push(imgs)
        // 保存点位id
        this.sensorshow.push(item.id)
        this.$message.success('请拖动图标到指定点位')
      } else {
        this.$message.warning('请先上传楼层平面图,在点击传感器')
      }
    },
    // 删除画布中设备
    async deletenew () {
      // console.log("this.can", this.canvasSensorImg);
      // console.log(
      //   "this.canvasSensorImg[this.index]",
      //   this.canvasSensorImg[this.index]
      // );
      // console.log(
      //   "this.canvasSensorImg[this.index].deviceId",
      //   this.canvasSensorImg[this.index].deviceId
      // );
      // // 删除设备
      // const res = await resdelete(this.canvasSensorImg[this.index].deviceId)
      // console.log("删除点位", res);
      // if (res.data == '删除失败') {
      //   this.$message.warning('该点位正在报警或故障' + res.data)
      // } else {
      //   // console.log("删除下标", this.index);
      //   this.canvasSensorImg.splice(this.index, 1)
      //   // 关闭设备详细信息
      //   this.canvasvisible = false
      //   // 刷新数据
      //   this.getfloornew()
      // }
    }
  },
  beforeDestroy () {
    // 在页面销毁后，清除计时器
    clearInterval(this.intervalId) //清除计时器
    this.intervalId = null //设置为null
    // 离开页面是清空
    this.windowlen = false
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 815px;
  // background-color: #FBFBFB;
  background-color: #fff;
  // box-shadow: 0px 0px 5px 3px #2485ab;
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 15px;
    //margin-bottom: 50px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 60px;
    margin-bottom: 100px;
  }
  .grid-left {
    padding: 30px 20px 20px;
    height: 815px;
    border: 1px solid #ccc;
    // overflow: hidden;
    overflow: auto;
    // background-color: #fff;
    border-radius: 4px;

    // 输入框
    .searchinput {
      margin-bottom: 20px;
      position: sticky;
      top: 0;
      z-index: 99;
    }
  }
  .grid-left::-webkit-scrollbar {
    height: 5px;
    width: 5px;
  }
  .grid-left::-webkit-scrollbar-thumb {
    background-color: #3485ff;
    border-radius: 5px;
  }
  .grid-right {
    // width: 1363px;
    width: 100%;
    height: 815px;
    padding: 30px 20px 20px;
    border: 1px solid #ccc;
    // background-color: #fff;
    position: relative;
    border-radius: 4px;
    // 标题
    .grid-top {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
      .top-floor {
        display: flex;
        align-items: center;
        i {
          display: block;
          width: 3px;
          height: 19px;
          background-color: black;
          background-color: #409eff;
          border-radius: 2px;
          margin-right: 5px;
        }
        p {
          margin: 0;
          padding: 0;
          color: #333;
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
    // 上传组件
    .box-upload {
      width: 650px;
      height: 250px;
      // border: dashed 1px #ccc;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: center;
      .bigImg-div {
        width: 136px;
        height: 136px;
        border-radius: 50%;
        overflow: hidden;
        // border: 1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: -15px;
        input {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          opacity: 0;
        }
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 30px;
          color: #ccc;
        }
        &:hover {
          border-color: #409eff;
          cursor: pointer;
          i {
            color: rgb(126, 124, 124);
          }
        }
      }
      .txt {
        font-family: '楷体', '楷体_GB2312';
        //   font-family: "黑体";
        // color: rgba(0, 0, 0, 0.45);
        color: #999;
        font-size: 16px;
        i {
          // color: #e24720;
          color: #007dff;
          font-style: normal;
        }
      }
    }
    // 图片展示
    .bigImg {
      display: block;
      width: 970px;
      height: 500px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -54%);
    }
    // 画布模块
    .canvas-box {
      width: 1000px;
      height: 620px;
      padding: 10px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      // cursor: pointer;
      .canvas-title {
        display: flex;
        // background-color: skyblue;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 60px;
        margin-top: -50px;
        .zuo {
          // font-size: 20px;
          // background-color: skyblue;
          font-family: '楷体', '楷体_GB2312';
          // font-weight: 700;
          color: #333;
          font-weight: bold;
          font-size: 16px;

          i {
            font-style: normal;
            // color: black;
            // font-size: 20px;
            color: #333;
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
      #canvas-item {
        width: 970px;
        height: 500px;
        // 画布
        canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
    // 保存平面图
    .bottom {
      width: 95%;
      height: 100px;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: skyblue;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
    // 设备弹出框
    ::v-deep .el-popover {
      // background-color: skyblue;
      padding: 0;
      .popover-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .popover-title {
          width: 30px;
          height: 35px;
          cursor: pointer;
          background-color: #e72528;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0 5px 0 0;
          i {
            font-size: 25px;
          }
        }
        i {
          font-style: normal;
          // font-size: 20px;
        }
      }
      p {
        // background-color: red;
        margin: 3px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .grid-table {
    padding: 16px 5px 5px;
    height: 815px;
    border: 1px solid #ccc;
    padding-left: 8px;
    padding-right: 8px;
    // background-color:#fff;
    border-radius: 4px;
    position: relative;
    .grid-top {
      display: flex;
      align-items: center;
      // background-color: skyblue;
      i {
        display: block;
        width: 3px;
        height: 19px;
        background-color: #409eff;
        // border-radius: 2px;
        margin-right: 5px;
      }
      p {
        // font-size: 17px;
        // font-weight: 700;
        // color: rgb(36, 37, 37);
        // color: black;
        color: #333;
        font-weight: bold;
        font-size: 16px;
      }
    }
    // 设备搜索
    .newretrieval {
      ::v-deep .el-input__suffix {
        &:active {
          background-color: #ccc;
          color: black;
        }
      }
    }
    // 设备列表
    .newtable {
      // background-color: #fff;
      margin-top: 10px;
      .new-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        //height: 80px;
        height: fit-content;
        padding: 10px 8px;
        cursor: pointer;
        margin: 12px 5px;
        // background-color: skyblue;
        // border-top: 2px solid #c8c8c8;
        // border-bottom: 2px solid #c8c8c8;
        box-shadow: 1px 1px 3px 3px #eee;
        border-radius: 6px;
        // border-bottom: 2px solid #c8c8c8;
        // &:last-child {
        //   border-bottom: 2px solid #c8c8c8;
        // }
        img {
          width: 45px;
          height: 45px;
        }
        .newconter {
          height: 100%;
          flex: 1;
          margin-left: 10px;
          font-size: 10px;
          overflow: hidden;

          p {
            padding: 0;
            margin: 3px 0;
            white-space: nowrap;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .deviceName {
            font-size: 16px;
            color: #333;
            margin-bottom: 6px;
            font-weight: 500;
          }
        }
      }
      // 点击样式
      .newitems {
        background-color: rgb(35, 130, 167 / 0.8);
      }
    }
    .pagination {
      margin-top: 10px;
      // display: flex;
      // justify-content: center;
      // align-content: center;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-25%, -25%);
    }
  }
}
</style>
